<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>component-basic</title>
    <meta charset="UTF-8">
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="blog-post-demo">
    <button-counter>btn1</button-counter>
    <!--    v-for 标签可以放在组件里渲染
            与组件绑定需要用 v-bind v-on v-model 绑定
        -->
    <blog-post></blog-post>
    <blog-post v-for="post in posts" v-on:enlarge-text="{fontSize: postFontSize+'em'}"
               v-bind:post="post"></blog-post>
</div>

<div id="blog-posts-events-demo">
    <div :style="{ fontSize: postFontSize + 'em' }">
        <blog-post2
                v-for="post in posts"
                v-bind:key="post.id"
                v-bind:post="post"
        ></blog-post2>
    </div>
</div>

<script>
    Vue.component('blog-post', {
        // 属性设定为object，传入了一个post组件
        props: ['post'],
        //  使用样式style 与 组件实例上的属性postFontSize 用 v-bind 绑定，
        template: `
            <div class="blog-post" >
                <h3>{{ post.title }}</h3>
                <button @click="$emit('enlarge-text')"> click me
                </button>
                <div v-html="post.content"></div>
            </div>
        `
    })

    // 定义一个名为 button-counter 的新组件
    Vue.component('button-counter', {
        data: function () {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++"> click <slot></slot> {{ count }} times.</button>'
    })

    new Vue({
        el: '#blog-post-demo',
        data: {
            posts: [
                {id: 1, title: 'My journey with Vue'},
                {id: 2, title: 'Blogging with Vue'},
                {id: 3, title: 'Why Vue is so fun'}
            ],
            // 实例上设置一个属性，与视图绑定
            postFontSize: 1
        }, methods: {
            enlarge: function (enlargeAmount,key) {
                console.log("enlarge : "+key);
                this.postFontSize += enlargeAmount
            }
        }
    })



    Vue.component('blog-post2', {
        props: ['post'],
        template: `
    <div class="blog-post2">
      <h3>{{ post.title }}</h3>
      <button>
        Enlarge text
      </button>
      <div v-html="post.content"></div>
    </div>
  `
    })
    new Vue({
        el: '#blog-posts-events-demo',
        data: {
            posts: [
                {id: 1, title: 'My journey with Vue'},
                {id: 2, title: 'Blogging with Vue'},
                {id: 3, title: 'Why Vue is so fun'}
            ],
            // 实例上设置一个属性，与视图绑定
            postFontSize: 1
        }, methods: {
            enlarge: function (enlargeAmount,key) {
                console.log("enlarge : "+key);
                this.postFontSize += enlargeAmount
            }
        }
    })
</script>
</body>
</html>